<template>
<div class="toolbar" style="display: flex;line-height: 60px;">

  <div>
      <el-icon style="font-size: 23px; margin-top: 30px;"><Fold /></el-icon>
  </div>

  <div style="flex: 1;text-align: center;font-size: 30px;">
    <span>欢迎使用衣洁干洗服务</span>
  </div>
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px"
                ><setting/></el-icon>
              <template #dropdown>
                <el-dropdown-menu >
            
                  <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span style="font-size: 15px;">{{ user.username }}</span>
          </div>
</template>

<script setup>
import router from '@/router';
import { Setting, Fold } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const user = JSON.parse(sessionStorage.getItem('CurUser'))
    const toUser = () => {
        console.log('toUser')
        router.push("/myHome")
    };
    const logout = () => {
      console.log('logout');

      ElMessageBox.confirm(
    '确认退出登录吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      router.push("/")
        sessionStorage.clear();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
    })
            }
    const created=()=>{
      router.push("/myHome")
    }
    created();
          
</script>